import React, { Component } from 'react'
import './index.less'

class Mtable extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: this.props.data || [],
      columns: this.props.columns || [],
      flag: false,
      content: '',
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.data !== this.props.data) {
      this.setState({
        data: nextProps.data,
      })
    }
  }

    showTooltip = (e, value, id, flag, idx) => {
      if (!flag) return false
      const _this = this
      setTimeout(function() {
        _this.setState({
          flag: true,
          content: value,
        }, () => {
          let toolTipDom = document.getElementById('tooltip')
          let mdiv = document.getElementById('m-table-scroll')
          const scrollTop = mdiv.scrollTop || mdiv.pageYOffset || 0
          const e_x = document.getElementById(id).offsetLeft
          const e_y = document.getElementById(id).offsetTop - scrollTop
          toolTipDom.style.top = (e_y - 37) + 'px'
          toolTipDom.style.left = (e_x) + 'px'
        })
      }, 100)
    }

    hideTooltip = () => {
      const _this = this
      setTimeout(function() {
        _this.setState({
          flag: false,
          content: '',
        })
      }, 100)
    }

    render() {
      const { data, columns, content, flag } = this.state
      return (
        <div className="m-table">
          <div className="m-table-header">
            {
              columns.length && columns.map(element => {
                return (
                  <div key={element.key} style={{ width: element.width + 'px' }} className="m-t-h">{element.title}</div>
                )
              })
            }
          </div>
          <div className="m-table-body">
            <div id="m-table-scroll" className="m-table-scroll">
              {
                data.length ? data.map((item, idx) => {
                  return (
                    <div key={item.id || item.uuid} className="m-table-row" onMouseLeave = {() => { this.hideTooltip() }} >
                      {
                        columns.length && columns.map((element, idx2) => {
                          const itemData = item[element.dataIndex].toString() || '-'
                          const tipData = item[element.dataIndex].toString()
                          return (
                            <div
                              key={idx2}
                              className="m-table-row-cell"
                              id={'m-table-row-' + idx + idx2}
                              onMouseEnter = {(e) => { this.showTooltip(e, tipData, 'm-table-row-' + idx + idx2, element.tooltip, idx) }}
                              onMouseLeave = {() => { this.hideTooltip() }}
                              style={{ width: element.width + 'px' }} key={element.key}>
                              {itemData}
                            </div>
                          )
                        })
                      }
                    </div>
                  )
                })
                  : <div className="m-table-empty">暂无数据</div>
              }
            </div>
            {
              flag && content
                ? <div id="tooltip" className={flag ? 'tooltip showBox' : 'tooltip hideBox'}>
                  {content}
                </div>
                : ''
            }
          </div>
        </div>
      )
    }
}

export default Mtable
